import { useRef, useState } from 'react'
import { Button, Card, List, Drawer } from 'antd'
import {
  PlayCircleFilled,
  RedoOutlined,
  OrderedListOutlined
} from '@ant-design/icons'
import Hls from 'hls.js'
import data from '../list.json'

export default function Home() {
  const [open, setOpen] = useState(true)
  const video = useRef(null)
  let hls = null

  const click = ({ url, proxy }) => {
    let url2 = new URL(url)
    let src = `http://localhost:5173${proxy}${url2.pathname}`
    console.log(src)
    try {
      hls = null
      hls = new Hls()
      hls.attachMedia(video.current)
      hls.loadSource(src)
    } catch (error) {
      console.log('出错了！')
    }
  }
  return (
    <div className="home">
      {/* 播放器 */}
      <Card className="card" hoverable>
        <video className="play" ref={video}></video>
        <img
          style={{ width: '100%', height: '100%', backgroundSize: '' }}
          src="https://mp-faf1c5bd-4804-4d15-90f2-021e39fb4618.cdn.bspapp.com/cloudstorage/c3c3d85e-cacc-4201-a66b-cc4a0135de43.gif"
          alt=""
        />
      </Card>
      {/* 控件 */}
      <Card className="card2" hoverable>
        <Button
          type="default"
          icon={<RedoOutlined />}
          onClick={() => window.location.reload()}
        >
          刷新
        </Button>
        &nbsp;
        <Button
          type="default"
          icon={<OrderedListOutlined />}
          onClick={() => setOpen(true)}
        >
          列表
        </Button>
      </Card>
      {/* 抽屉 */}
      <Drawer
        title={<span>列表</span>}
        placement="right"
        onClose={() => setOpen(false)}
        open={open}
      >
        <List
          bordered
          dataSource={data}
          renderItem={(item) => (
            <List.Item
              extra={
                <Button icon={<PlayCircleFilled />} onClick={() => click(item)}>
                  播放
                </Button>
              }
            >
              {item.name}
            </List.Item>
          )}
        />
      </Drawer>
    </div>
  )
}
